<template>
    <el-table :data="autoList" style="width: 100%" height="300" header-row-class-name="table_header_title">
        <el-table-column type="index" label="排序" width="50"></el-table-column>
        <el-table-column label="群活码" width="80">
            <template #default="scope">
                <img v-if="scope.row.qr_code" class="qrcode_img" :src="scope.row.qr_code" alt="" />
                <ZWUpload v-else :data-id="scope.row.id" @submit="getERw" />
            </template>
        </el-table-column>
        <el-table-column label="活码名称">
            <template #default="scope">
                <el-input
                    v-model="scope.row.name"
                    class="group_num_name"
                    placeholder="请输入群活码"
                    :disabled="props.look"
                    @input="inputName(scope.row)" />
            </template>
        </el-table-column>
        <el-table-column label="企微活码发送次数限制" width="300">
            <template #default="scope">
                企微活码发送次数达到
                <el-input
                    v-model="scope.row.limit"
                    class="group_num_lint"
                    :disabled="props.look"
                    @blur="inputNum(scope.row)" />
                人，换群活码加入
            </template>
        </el-table-column>
        <el-table-column label="操作" width="100" align="center">
            <template #default="scope">
                <el-button size="small" :disabled="props.look" @click.prevent="removeGroup(scope.row)">删除</el-button>
            </template>
        </el-table-column>
        <template #empty>
            <img class="emty_img" src="@/assets/noData.png" alt="" />
            <div class="emty_title">{{ '暂无数据' }}</div>
        </template>
    </el-table>
    <div style="margin-top: 10px">
        <el-button :icon="Plus" size="small" :disabled="props.look" @click="uploadQrewm">上传群活码 </el-button>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import ZWUpload from './ZWUpload.vue';
import { ElMessage } from 'element-plus';
const props = defineProps(['look']);
const autoList = ref([]);
const uploadQrewm = () => {
    const params = {
        id: autoList.value.length,
        qr_code: '',
        name: '',
        limit: '200'
    };
    autoList.value.push(params);
};
const inputName = (row: any) => {
    row.name = row.name.replace(/[\s]+/g, '');

    const arr = autoList.value.filter((item: any) => item.id !== row.id);
    if (arr.length > 0) {
        const flag = arr.every((item: any) => item.name === row.name);
        if (flag) {
            ElMessage.warning('群活码名称不能重复');
            return;
        }
    }
};
const inputNum = (row: any) => {
    let num = row.limit;
    num = typeof num == 'string' ? num.replace(/\D/g, '') : num;
    if (num >= 200) {
        num = 200;
    }
    if (num <= 1) {
        num = 1;
    }
    row.limit = num;
    // autoList.value.map((item:any)=>{
    //   if(item.id==row.id){
    //     item.limit = num
    //   }
    // });
};
const getERw = (row: any) => {
    autoList.value.map((item: any) => {
        if (item.id == row.id) {
            item.qr_code = row.url;
        }
    });
};
const removeGroup = (row: any) => {
    autoList.value = autoList.value.filter((item: any) => item.id != row.id);
};
defineExpose({
    autoList
});
</script>
<style scoped lang="scss">
.qrcode_img {
    width: 40px;
    height: 40px;
}

.emty_img {
    transform: translateX(15%);
}

.emty_title {
    margin-top: -50px;
}

.group_num_lint {
    width: 80px;
}

.group_num_name {
    width: 120px;
}
</style>
<style lang="scss">
.table_header_title {
    height: 60px;

    th.el-table__cell {
        background: #f9f9f9;
        padding: 10px 0;
    }
}
</style>
